<template>
  <div style="height:100%">
    <!--搜索-->
    <div class="search-warp">
      <div class="qr-code" @tap="switchContent">
        <!--切换内容展示形式 mui-icon-extra-->
        <div :class="switchContentStatus? 'icon-qiehuan':'icon-qiehuan2'" style="margin-top:1px;font-size:1rem; position:absolute;top:-1px;left:5px;"></div>
      </div>
      <div class="search-box" >
        <span class="mui-icon mui-icon-search"></span>
       <!--   <div class="mui-icon-extra mui-icon-extra-sweep" style="margin-top:1px" @tap="handleRouteBarCode"></div> -->
        <input v-on:focus="handleRouteSearch" v-model="pigingobj.keywords" style="padding-left:30px" type="text" placeholder="请输入车名  如奥迪A4L">
      </div>
      <div class="service">
        <!--客服-->
        <div class="mui-icon-extra icon-33" style="margin-top:1px;font-size:24px;" @tap="switchBackDrop">
          <span class="customer" v-if="$store.state.appChat.roomData.cust_msg_count" ></span>
          <div style="font-size:12px;position:absolute;top:25px;color:#999999;">客服</div>
        </div>
      </div>
      <div class="leaveworld" @tap="goMsgCenter">
        <!--留言-->
        <div class="mui-icon-extra icon-44" style="margin-top:1px;font-size:24px;"></div>
        <span class="customer" style="right:13px;" v-if="$store.state.appMsg.msgStatus"></span>
        <div style="font-size:12px;position:absolute;top:22px;color:#999999;">消息</div>
      </div>
    </div>
    <!--条件筛选-->
    <div class="screening">
      <ul>
        <li :class="$store.state.appCarlist.activeBrand ? 'active' : ''" @tap="handleRouteBrand">
          <div>品牌 <span class="icon-xiajiantou"></span></div>
        </li>
        <li  :class="$store.state.appCarlist.activePrice ? 'active' : ''" @tap="handlePriceShow">
          <div>价格 <span class="icon-xiajiantou"></span></div>
        </li>
        <li :class="$store.state.appCarlist.activeType ? 'active' : ''" @tap="handleTypeShow">
          <div>车型  <span class="icon-xiajiantou"></span> </div>      
        </li>
        <li :class="$store.state.appCarlist.activeCountry ? 'active' : ''" @tap="handleCountryShow">
          <div>产地 <span class="icon-xiajiantou"></span> </div>
        </li>
      </ul>
    </div>  
    <div class="mui-backdrop_wapper" v-show="priceShow">
      <div class="priceInput">
        <div class="innerInput">
          <input type="text"  v-model="minAllPrice" maxlength="3" placeholder="最低">
          <div class="range"></div>
          <input type="text"  v-model="maxAllPrice" maxlength="3" placeholder="最高">
          <div class="unit">万</div>
          <button type="button" class="mui-btn mui-btn-warning" @click="setPrice">确定</button>
        </div>
      </div>
      <dl class="fix list"> 
        <!-- <dd>
          <a  data-label="价格" class="selected">不限</a>
        </dd> -->
        <dd v-for="price in $store.state.appCarlist.priceList">
          <a @tap="handlePrice(price)">{{price.name}}</a>
        </dd>
      </dl>
      <div class="mui-backdrop" v-show="priceShow" @tap="handlePriceShow"></div>
    </div>
    <div class="mui-backdrop_wapper" v-show="typeShow">
      <dl class="fix list" >
        <!-- <dd>
          <a  class="selected" data-label="类型">不限</a>
        </dd> -->
        <dd v-for="carType in $store.state.appCarlist.carTypes">
          <a @tap="handleCarType(carType)">{{carType.name}}</a>
        </dd>
        <dd>
          <a @tap="handleCarType('新能源')" :class="isNewEnergyStatus ? 'isNewEnergyActive' : ''">新能源(多选)</a>
        </dd>
      </dl>
      <div class="mui-backdrop" @tap="handleTypeShow" v-show="typeShow"></div>
    </div>
    <!-- <div class="mui-backdrop_wapper" v-show="CountryShow">
      <dl class="fix list" >
        
        <dd v-for="sourceCountry in $store.state.appCarlist.sourceCountrys">
          <a @tap="handleCountry(sourceCountry)">{{sourceCountry.name}}</a>
        </dd>
      </dl>
      <div class="mui-backdrop" @tap="handleCountryShow" v-show="CountryShow"></div>
    </div> -->
    <!-- 小叉叉 -->
    <div class="screen-conditions" v-if="screenConditions()">
        <ul>
          <li v-show="$store.state.appCarlist.actBrand" @tap="closBrandCondition($store.state.appCarlist.brand)">{{$store.state.appCarlist.brand.cName}}<span class="icon-cha ca"></span></li>
          <li v-show="$store.state.appCarlist.actPrice" @tap="closBrandCondition($store.state.appCarlist.price)">{{$store.state.appCarlist.price.name}}<span class="icon-cha ca"></span></li>
          <li v-show="$store.state.appCarlist.actCarType" @tap="closBrandCondition($store.state.appCarlist.carType)">{{$store.state.appCarlist.carType.name}}<span class="icon-cha ca"></span></li>
          <li v-show="$store.state.appCarlist.actCountry" @tap="closBrandCondition($store.state.appCarlist.carSource)">{{$store.state.appCarlist.carSource.name}}<span class="icon-cha ca"></span></li>
          <li v-show="$store.state.appCarlist.actIsNewEnergy" @tap="closBrandCondition($store.state.appCarlist.isNewEnergy)">{{$store.state.appCarlist.isNewEnergy.name}}<span class="icon-cha ca"></span></li>
        </ul>
    </div>
    <!-- 车型列表 -->
    <div class="mui-content mui-scroll-wrapper" id="pullrefresh"> 
      <div class="mui-scroll" >
        <screen-car v-if="switchContentStatus" :class="screenConditions() ? 'screen-top':''" :pagingMsg="pagingMsg"></screen-car>
        <col-screen-car v-if="!switchContentStatus" :class="screenConditions() ? 'screen-top':''" :pagingMsg="pagingMsg"></col-screen-car>
      </div>
    </div>
    <!-- 上拉图标 -->
    <pull-up></pull-up>
    <!-- 参数空时页面 -->
    <div class="empty" v-if="carInfoEmpty||pagingMsg.carInfo.length==0">
      <span class="icon-zanwu-01"></span>
      <span class="empty_text">暂无符合条件的车型</span>
    </div>
    <!-- 联系选择弹窗 -->
    <!-- <contactPopover :backdrop="backdrop" @backdrop="handleBackdrop"></contactPopover> -->
    <actionSheet></actionSheet>
  </div>
</template>
<script>
  /* 这边记得引入刷新组件,下拉后无法固定滑动，切记 */
  import 'static/js/mui.pullToRefresh.js'
  import 'static/js/mui.pullToRefresh.material.js'
	import mui from 'static/js/mui'
  import screenCar from '@/components/base/screen-car/screen-car'
  import colScreenCar from '@/components/base/screen-car/col-screen-car'
  /* import contactPopover from "@/components/base/contact-popover/contact-popover" */
  import actionSheet from '@/components/base/contact-popover/actionsheet'
  import pullUp from '@/components/base/pull-up/pull-up'
  import {getPagingCars} from '@/nodeApi/filter'
  import {findLikeSeriesName} from '@/nodeApi/search'
  import {validatedMoney} from '@/utils/validator'
  import { Toast, Indicator } from 'mint-ui'
  import { mapState } from 'vuex'
  export default {
    data() {
      return {
        activeBrand: true,
        activePrice: false,
        activeType: false,
        activeCountry:false,
        priceShow: false,
        typeShow: false,
        CountryShow: false,
        carInfoEmpty: false,
        switchContentStatus: false,
        noMoreStatus: false,
        //backdrop: false,
        isNewEnergyStatus: false,
        minAllPrice: '',
        maxAllPrice: '',
        pagingMsg:{
          carInfo: [
          ]
        },
        pigingobj: {
          pageNow: 0,
          pageSize: 10,
          type: '',
          brandId: '',
          carSource: '',
          minAllPrice: '',
          maxAllPrice: '',
          isNewEnergy: '',
          keywords:''
        },
        scrollY:0
      };
    },
    props: {},
    watch: {
      // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
      '$route': 'getParams'
    },
    components:{
      screenCar, colScreenCar, pullUp, actionSheet
    },
    methods: {
      /* 小叉叉状态 */
      screenConditions() {
        if( this.$store.state.appCarlist.actBrand || 
            this.$store.state.appCarlist.actPrice || 
            this.$store.state.appCarlist.actCarType || 
            this.$store.state.appCarlist.actCountry ||
            this.$store.state.appCarlist.actIsNewEnergy){
            return true
        }
        return false
      },
      /* 从子组件接收参数，监听为子组件方法名 */
      handleBackdrop(data) {
        this.backdrop = data;
      },
      switchBackDrop() {
        //this.backdrop = !this.backdrop;
        mui('#sheet1').popover('toggle');
      },
      /*切换内容展现*/
      switchContent() {
        this.switchContentStatus = !this.switchContentStatus
      },
      /* mui刷新每次切换路由记得申明这个，别问为什么，百度 */
      refresh() {
        for(var i = mui.hooks.inits.length-1,item;i>=0;i--){
          item=mui.hooks.inits[i];
          if(item.name=="pullrefresh"){
              item.repeat=true;
          }
        }
      },
      goChat() {
        this.$router.push({
          path: "/chat",
        })
      },
     goMsgCenter() {
       this.$router.push('msgCenter')
     },
      /* 刷新筛选 */
      updateFilter() {
          if(this.noMoreStatus){
            mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,0);
          }
          this.pigingobj.pageNow = 1
          this.pigingobj.brandId = this.$store.state.appCarlist.brand.id//品牌
          this.pigingobj.carSource = this.$store.state.appCarlist.carSource.id//产地
          this.pigingobj.type = this.$store.state.appCarlist.carType.id//车型
          this.pigingobj.minAllPrice = this.$store.state.appCarlist.price.minAllPrice//最低价
          this.pigingobj.maxAllPrice = this.$store.state.appCarlist.price.maxAllPrice//最高价
          if(this.$store.state.appCarlist.isNewEnergy != ''){
             this.pigingobj.isNewEnergy = this.$store.state.appCarlist.isNewEnergy.status//新能源
          }
          getPagingCars(this.pigingobj).then(resp => {
            this.$set(this.pagingMsg,'carInfo',resp.data.carInfo)
            //console.log(this.pagingMsg.carInfo)
            //this.pagingMsg.carInfo= resp.data.carInfo
            if(resp.data.carInfo.length == 0){
              this.carInfoEmpty = true
            }else{
              this.carInfoEmpty = false
            }
            mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);
            // 如果有更多数据，则继续
            mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
            //重置
            //this.refresh()
            mui('#pullrefresh').pullRefresh().refresh(true);
          })
      },
      //增加pageNum 增加数据
      pageNowPlus() {
          this.pigingobj.pageNow++
          this.pigingobj.brandId = this.$store.state.appCarlist.brand.id//品牌
          this.pigingobj.carSource = this.$store.state.appCarlist.carSource.id//产地
          this.pigingobj.type = this.$store.state.appCarlist.carType.id//车型
          this.pigingobj.minAllPrice = this.$store.state.appCarlist.price.minAllPrice//最低价
          this.pigingobj.maxAllPrice = this.$store.state.appCarlist.price.maxAllPrice//最高价
          getPagingCars(this.pigingobj).then(resp => {
            //console.log(this.pagingMsg.carInfo)
            this.pagingMsg.carInfo=this.pagingMsg.carInfo.concat(resp.data.carInfo)
            try{
              if(resp.data.page.totalPageCount <= this.pigingobj.pageNow){
                mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
                this.noMoreStatus = true
              }
              else{
                // 如果有更多数据，则继续
                
                  mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
              }
            }catch(e) {
              //console.log('我在231行')
            }
          })
      },
      //增加pageNum 增加数据
      pageNowPlusFirst() {
          this.pigingobj.pageNow++
          this.pigingobj.brandId = this.$store.state.appCarlist.brand.id//品牌
          this.pigingobj.carSource = this.$store.state.appCarlist.carSource.id//产地
          this.pigingobj.type = this.$store.state.appCarlist.carType.id//车型
          this.pigingobj.minAllPrice = this.$store.state.appCarlist.price.minAllPrice//最低价
          this.pigingobj.maxAllPrice = this.$store.state.appCarlist.price.maxAllPrice//最高价
          getPagingCars(this.pigingobj).then(resp => {
            this.pagingMsg.carInfo=this.pagingMsg.carInfo.concat(resp.data.carInfo)
          })
      },
      /* 关键词搜索 */
      handleFindLikeSeriesName(keyword) {
        findLikeSeriesName(keyword).then(resp => {
          this.pagingMsg.carInfo= resp.data.carInfos
          if(resp.data.carInfos.length == 0){
            this.carInfoEmpty = true
          }else{
            this.carInfoEmpty = false
          }
        })
      },
      handleRouteBarCode() {
        this.$router.push({
          path: "/barCode",
        })
      },
      handleRouteSearch() {
        this.$router.push({
          path: "/search",
        })
      },
      back() {
        this.$router.push({
          path: "/index"
        });
      },
      // 差差小方块清除条件
      closBrandCondition(ele){
        //清空新能源
        if(ele.name == '新能源'){
          this.isNewEnergyStatus = false
        }
        this.pigingobj.isNewEnergy = ''
        this.$store.dispatch('closCondition',ele)
        //ajax
        this.updateFilter()
      },
      handlePriceShow() {
        this.priceShow = !this.priceShow
        this.typeShow = false
        this.CountryShow = false
        this.$store.dispatch('changePrice')
      },
      handleTypeShow() {
        this.typeShow = !this.typeShow
        this.priceShow = false
        this.CountryShow = false
        this.$store.dispatch('changeCarType')
      },
       handleCountryShow() {
        this.CountryShow = !this.CountryShow
        this.typeShow = false
        this.priceShow = false
        this.$store.dispatch('changeCountry')
      },
      //input价格选择后拿到赋值
      setPrice() {
        // 验证是否为钱
        if(validatedMoney(this.minAllPrice) && validatedMoney(this.maxAllPrice)){
          let price = { name: this.minAllPrice + '万-' + this.maxAllPrice + '万',
                        minAllPrice:  this.minAllPrice, 
                        maxAllPrice:  this.maxAllPrice }
          this.$store.dispatch('choicePrice',price)
          this.priceShow = false
          //ajax
          this.updateFilter()
        }else{
          Toast('输入的金额不正确')
        }      
      },
      //价格选择后拿到赋值
      handlePrice(price){
        this.price = price
        this.priceShow = false
        this.$store.dispatch('choicePrice',this.price)
        //ajax
        this.updateFilter()
      },
      //车型选择后拿到赋值
      handleCarType(carType) {
        if(carType == '新能源'){
          var carType =  { name: "新能源",status: 1 }
          this.pigingobj.isNewEnergy = 1
          this.isNewEnergyStatus = true
          //this.typeShow = false
          this.$store.dispatch('choiceIsNewEnergy',carType)
          //ajax
          this.updateFilter()
          mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);
          return 
        }
        this.carType = carType
        this.typeShow = false
        this.$store.dispatch('choiceCarType',this.carType)
        //ajax
        this.updateFilter()
        mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);
      },
      //产地选择后拿到赋值
      handleCountry(sourceCountry) {
        this.sourceCountry = sourceCountry
        this.CountryShow = false 
        this.$store.dispatch('choiceSourceCountry',this.sourceCountry)
        //ajax
        this.updateFilter()
        mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);
      },
      handleRouteBrand() {
        this.$store.dispatch('changeBrand')
        this.$router.push({
          path: "/brand"
        })  
      },
      getParams() {
        //获取路由参数'
        let routeVal = this.$route.params
        // //console.log(routeVal);
        if(JSON.stringify(routeVal)!=="{}"){
          if(typeof(routeVal.brand) !== 'undefined'){
            //  //console.log(routeVal.brand)
            this.$store.dispatch('choiceBrand',routeVal.brand)
            this.$store.dispatch('changeBrand')
            //ajax
            this.updateFilter()
          }
          if(typeof(routeVal.price) !== 'undefined'){
            // //console.log(routeVal.price)
            this.$store.dispatch('choicePrice',routeVal.price)
            this.$store.dispatch('changePrice')
            //ajax
            this.updateFilter()
          }
          if(typeof(routeVal.carType) !== 'undefined'){
            // //console.log(routeVal.carType)
            this.carType = routeVal.carType
            this.$store.dispatch('choiceCarType',routeVal.carType)
            this.$store.dispatch('changeCarType')
            if(typeof(routeVal.isNewEnergy) !== 'undefined'){
              this.pigingobj.isNewEnergy = 1
            }
            //ajax
            this.updateFilter()
          }
          // 取search页面值
          if(typeof(routeVal.keyword) !== 'undefined'){
            //ajax
            this.pigingobj.keywords = routeVal.keyword
            this.updateFilter()
          }
        }else{
          //没有search页面参数则触发
          this.pageNowPlusFirst()
        }
      }
    },
    filters: {},
    computed:{
      ...mapState([
          'appData',
      ])
    },
    created() {
      /* mui刷新每次切换路由记得申明这个，别问为什么，百度 */
      this.refresh()
      //this.getCars()
      //向store提交方法 拿到车型数据和地产数据
      this.$store.dispatch('handlerGetCarTypes');
      this.$store.dispatch('handlerGetCarSource');
      //加入loading效果
      Indicator.open();
      //去除loading效果
      Indicator.close();
      if(!this.appData.cachePrevPageStatuts){
        this.getParams();
      }
    },    
    destroyed () { 
      this.$store.dispatch('updatePigingobj', Object.assign({},this.pigingobj));
      this.$store.dispatch('updatePagingMsg', Object.assign({},this.pagingMsg));
      //console.log(this.scrollY)
      this.$store.dispatch('updateFilterScrollY', this.scrollY);
      //去除loading效果
      Indicator.close();
      this.$store.dispatch('updateCachePrevPageStatuts', false)
    },
    mounted () {
      var that = this;
      mui.init({
        pullRefresh : {
            container:"#pullrefresh",//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
            up : {
                height:50,// 可选.默认50.触发上拉加载拖动距离
                auto:false,// 可选,默认false.自动上拉加载一次
                contentrefresh : "正在加载...",// 可选，正在加载状态时，上拉加载控件上显示的标题内容
                contentnomore:'没有更多数据了',// 可选，请求完毕若没有更多数据时显示的提醒内容；
                callback : function() {
                  // 加载更多的内容
                  ////console.log("触发下来加载")
                  that.pageNowPlus()
                } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
            }
        },
        keyEventBind: {
          backbutton: true  //关闭back按键监听
        }
      })
      // //首页返回键处理
      // //处理逻辑：1秒内，连续两次按返回键，则退出应用；
      var first = null;
      mui.back = function() {
          //首次按键，提示‘再按一次退出应用’
          if (!first) {
              first = new Date().getTime();//记录第一次按下回退键的时间
              mui.toast('再按一次退出应用');//给出提示
              // history.go(-1)//回退到上一页面
              setTimeout(function() {//1s中后清除
                  first = null;
              }, 1000);
          } else {
              if (new Date().getTime() - first < 1000) {//如果两次按下的时间小于1s，
                  plus.runtime.quit();//那么就退出app
      } } };
      //竖向滚动
      scroll = mui('.mui-scroll-wrapper').scroll({
        scrollY: true, //是否竖向滚动
        scrollX: false, //是否横向滚动
        startX: 0, //初始化时滚动至x
        startY: 0, //初始化时滚动至y
        indicators: false, //是否显示滚动条
        deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
        bounce: false //是否启用回弹
      });
      document.querySelector('.mui-scroll-wrapper').addEventListener('scroll', function (e ) { 
        that.scrollY = scroll.y
      }) 
      if(this.appData.cachePrevPageStatuts){
        //alert(1)
        //console.log(this.appData.filterScrollY)
        const pigingobj = Object.assign({},this.appData.pigingobj)
        const carInfo = Object.assign([],this.appData.pagingMsg.carInfo)
        this.pigingobj = pigingobj
        this.pagingMsg.carInfo = carInfo
        mui('.mui-scroll-wrapper').scroll().scrollTo(0, this.appData.filterScrollY,0);//100毫秒滚动到顶
      }
    },
  };
</script>

<style lang="scss" scoped>
/* 搜索 */
  .mui-icon-search {
    position: absolute;
    top:5px;
    left:-22px!important;
    font-size: 20px;
    z-index:999;
  }

  .search-warp {
    position: relative;
    left: 0;
    right: 0;
    top:0px;
    z-index: 10;
    margin: 0px !important;
    padding: .3rem .5rem .3rem 4.25rem;
    background:#fff;
  }
  .mui-text-right{
    position:absolute;
    bottom:4px;
    right:5px;
  }
  /**客服 */
  .service{
    position: absolute;
    right:30px;
    top: .25rem;
    width: 40px;
    height: 32px;
    color: #333;
  }
  .leaveworld{
    position: absolute;
    right:-5px;
    top: .25rem;
    width: 40px;
    /* height: 32px; */
    color: #333;
  }
  /* 二维码 */
  .qr-code {
    position: absolute;
    left:12px;
    top: .55rem;
    width: 40px;
    height: 32px;
    color:#333;
  }
  .saoyisao {
    position: relative;
    text-align: center;
    height: 20px;
    top:-5px;
    left:-8px;
  }
 
 
  .search-box {
    position: relative;
  }
  .mui-icon-search[data-v-7b63ac08] {
      position: absolute;
      top: 5px;
      left:-22px;
      z-index:55;
  }
  .search-box input {
    position:relative;
    left:-30px;
    width:85%;
    padding: .1rem 40px .1rem 0rem;
    font-size: .6rem;
    background-color: #f5f5f5;
    border:none;
    border-radius: 1rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0px !important;
    height: 32px !important;
  }

/**筛选条件小方块*/
.screen-conditions{
  margin-top:40px;
  background:#f5f5f5;
  padding:10px 10px 10px 10px;
  color:#333;
  border-bottom:1px solid #e9e9e9;
  position: relative;
  z-index:5;
}
.screen-conditions ul li{
  list-style:none;
  display:inline-block;
  background:#fff;
  padding:5px 8px 5px 8px;
}
.ca{
  font-size:0.5rem;
top:1px;left:4px;
  color:#999;
  position:relative;
}
.mui-scroll {
  background:#f5f5f5!important;
}
.mui-scroll-wrapper {
    position: absolute;
    bottom: 60px!important;
    left: 0;
    overflow: hidden;
    width: 100%;
}
.mui-btn-warning, .mui-btn-yellow {
    color: #fff;
    border: 1px solid #ff6a27;
    background-color: #ff6a27;
}

/* 筛选栏 */
div.screening {
  width:100%;
  height:40px;
  line-height: 40px;
  background:#fff;
  position: fixed;
  font-size:0.6rem;
  z-index:99;
  /* -moz-box-shadow:0px 1px 1px #ddd; 
  -webkit-box-shadow:0px 1px 1px #ddd; 
  box-shadow:0px 1px 1px #ddd; */
  border-bottom: 1px solid #ddd;
}
div.screening ul{
  text-align: center;
}

div.screening ul li {
  float:left;
  width:25%;
  border-bottom: 1px solid #f0f0f0;
}

div.screening ul li a {
  height:40px;
  line-height: 40px;
  display: inline-block;
}
div.screening ul li span{
  text-align:center;
}
.list {
  position: absolute;
  z-index:999;
  width:100%;
  padding:5px;
}
dl.fix.list{
  background-color:#fff ;
}
.list dd {
  float: left;
  width: 33.3333%;
}
.list dd a {
  display: block;
  margin: 5%;
  line-height: 1.4rem;
  text-align: center;
  border: 1px solid #e9e9e9;
}
/* 过渡效果 */
/* .upDown-enter-active, .upDown-leave-active {
  transition: all .4s ease;
}
.upDown-enter, .upDown-leave-to {
  transform: translateY(-200px);
  opacity: 0
} */
.much_filter {
  display:inline-block;
  line-height: 37px;
  margin-left:10px;
}
.other_filter {
  float: right;
  display: inline-block;
  line-height: 37px;
  margin-right:15px;
}
/* 遮罩容器 */
.mui-backdrop_wapper{
  top:85px;
  height:100%;
  position: fixed;
  z-index: 998;
  right: 0;
  bottom: 0;
  left: 0;

}
.mui-backdrop{
  top:85px;
  height:100%;
  z-index: 998;
}
.mui-bar-tab {
  z-index:0;
}
/* 选中样式 */
.active {
  color:#ff6a27;
  border-bottom: #ff6a27 solid 1.5px!important;
}
.activeHover{
  color:red;
}
/* 价格输入 */
.priceInput{
  font-size: 0;
  height:55px;
  border-bottom:#e2e2e2 1px solid;
  background-color:#fff;
  position: relative;
  z-index:999;
}
.priceInput .innerInput{
  margin-left:1.6665%;
  width:96.667%;
  padding:10px 5px 10px 5px;
}
.priceInput div input{
  display: inline-block;
  width:28%;
  height:35px;
  border: 1px solid #e9e9e9;
  font-size:12px;
  margin:0px;
}
.unit{
  display: inline-block;
  width:8%!important;
  text-align: center;
  font-size:12px;
}
.range{
  display: inline-block;
  width:11%!important;
  margin-left:2%;
  margin-right:2%;
  height: 1px;
  background: #e9e9e9;
  position: relative;
  top:-3px;
}

.mui-btn-warning{
  width:21%;
  height:35px;
}
input::-ms-input-placeholder{text-align: center;}
input::-webkit-input-placeholder{text-align: center;}
.mui-bar-nav ~ .mui-content {
   padding:0px;
}
/* 页面为空时 */
.empty {
  width: 100%;
  height: 100rem;
  background-color: #fff;
  z-index:2;
  position: relative;
}
.icon-zanwu-01{
  font-size:5rem;
  position: relative;
  display: block;
  text-align: center;
  padding-top:140px;
}
.icon-zanwu-01:before {
  color:#aaaaaa;
}
.empty_text{
  width:100%;
  display: block;
  text-align: center;
  color:#aaaaaa;
  font-size:14px;
}
/* 当有小叉叉时加上外边距 */
.screen-top{
  margin-top:135px!important;
}
.mui-icon-extra-sweep{
  position: absolute;
  top: 7px;
  left: 182px !important;
  font-size: 16px;
  z-index: 999;
  color:#666666;
}

.isNewEnergyActive{
  color: #ff6a27!important;
  border: 1px solid #ff6a27!important;
}
.customer {
    position: absolute;
    width:8px;
    height:8px;
    background: #ff6a27;
    border-radius:4px;
    top:1px;
    margin-left: -7px;
    font-size: 10px;
  }
</style>
